<script setup>
import { Upload, Download, Delete, Refresh, Search, Plus, Edit, User, Message, House } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { onMounted, } from 'vue';
import { storeToRefs } from 'pinia';
const userStore = useUserStore()
const { users, total, pageSize, currentPage, usernameSearch, emailSearch, addressSearch, dialogVisible, userForm } = storeToRefs(userStore)
const { getUsers, clearSearch, save, editUser, deleteUser, handleSelectionChange, deleteUsers, exp, handleUploadSuccess} = userStore
onMounted(() => {
    getUsers()
})
</script>

<template>
    <!-- 用户数据列表表头 -->
    <el-scrollbar style="padding: 0 20px;">
        <!-- 功能 -->
        <div style="margin: 10px 0;">
            <el-input style="width: 200px;" v-model="usernameSearch" placeholder="请输入名称" :suffix-icon="User"></el-input>
            <el-input style="width: 200px;  margin-left: 5px;" v-model="emailSearch" placeholder="请输入邮箱"
                :suffix-icon="Message"></el-input>
            <el-input style="width: 200px; margin-left: 5px;" v-model="addressSearch" placeholder="请输入地址"
                :suffix-icon="House"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="getUsers()">搜索<el-icon>
                    <Search />
                </el-icon></el-button>
            <el-button type="primary" @click="clearSearch()">重置<el-icon>
                    <Refresh />
                </el-icon></el-button>
            <br>
            <div style="height: 10px;width: 100%;"></div>
            <el-button type="success" @click="dialogVisible = true; userForm = {}">新增<el-icon>
                    <Plus />
                </el-icon></el-button>

            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon title="确定要删除吗?"
                @confirm="deleteUsers()">
                <template #reference>
                    <el-button type="danger">批量删除<el-icon>
                            <Delete />
                        </el-icon></el-button>
                </template>
            </el-popconfirm>
            <el-upload action="/api/user/import" :show-file-list="false" :on-success="handleUploadSuccess" style="display: inline-block; margin-left: 10px;margin-right: 10px;">
                <el-button type="primary" style="padding-top: 5px;">导入
                    <el-icon>
                        <Upload />
                    </el-icon>
                </el-button>
            </el-upload>
            <el-button type="primary" @click="exp()">导出
                <el-icon>
                    <Download />
                </el-icon>
            </el-button>
        </div>

        <!-- 用户数据列表 -->
        <el-table :data="users" :border="true" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column prop="id" label="ID" width="50" />
            <el-table-column prop="username" label="用户名" width="80" />
            <el-table-column prop="nickname" label="昵称" width="120" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="phone" label="电话" width="160" />
            <el-table-column prop="address" label="地址" />
            <el-table-column label="选项" width="200">
                <template v-slot:default="scope">
                    <el-button type="warning" @click="editUser(scope.row)">编辑<el-icon>
                            <Edit />
                        </el-icon></el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon
                        title="确定要删除吗?" @confirm="deleteUser(scope.row.id)">
                        <template #reference>
                            <el-button type="danger">删除<el-icon>
                                    <Delete />
                                </el-icon></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="padding: 10px 0;">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
                :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
                @size-change="userStore.getUsers()" @current-change="userStore.getUsers()" />
        </div>
    </el-scrollbar>

    <!-- 新增和编辑 弹出对话框 -->
    <el-dialog v-model="dialogVisible" title="新增用户" width="30%" :close-on-click-modal="false">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="userForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="userForm.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="userForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="userForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="userForm.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>